// 组件：底部固定静态评论显示框，赞藏方法不在这儿展示，根据自己需求修改
<template>
  <view class="bottom-comment">
    <!-- 左边静态输入框 -->
    <view class="disable-input" @click.stop="emit('articleCommentInputFocus', 1)">
      请输入审批意见
    </view>
    <view v-if="$slots['bc-tool']" class="bottom-comment-tool flex flex-row align-center">
      <slot name="bc-tool"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">

defineOptions({ name: 'BottomComment'})

const $slots = useSlots();

const emit = defineEmits([
  'articleCommentInputFocus'
])
</script>

<style lang="scss">
.bottom-comment {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 80;
  width: 100vw;
  min-height: 120rpx;
  background-color: #fff;
  box-shadow: 0 0 8rpx 4rpx #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
  box-sizing: border-box;

  .disable-input {
    width: 100%;
    height: 70rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #f6f6f6;
    border-radius: 35rpx;
    font-size: 28rpx;
    color: #767676;
    display: flex;
    align-items: center;
  }

  .bottom-comment-tool {
    margin-left: 40rpx;
  }

  .bottom-item {
    flex: 1;
    display: flex;
    align-items: center;

    .item-icon {
      font-size: 38rpx;
      padding-right: 10rpx;
    }

    .isUp {
      color: $uni-color-primary;
    }

    .item-text {
      font-size: 30rpx;
    }
  }
}
</style>
